<template>
  <div class="summary">
    <e-container v-if="props.applyForExtensionData.clientID">
      <e-title title="Apply For Extension" />
      <div class="table">
        <a-row>
          <a-col :span="4" class="cell field">Reason</a-col>
          <a-col :span="20" class="cell value" style="white-space: pre-line">
            {{ props.applyForExtensionData.reason }}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="cell field">Created By</a-col>
          <a-col :span="8" class="cell value">{{ props.applyForExtensionData.createByName }}</a-col>
          <a-col :span="4" class="cell field">Created On</a-col>
          <a-col :span="8" class="cell value">{{ props.applyForExtensionData.createOn }}</a-col>
        </a-row>
      </div>
    </e-container>
    <e-container v-if="props.applyForRevivalData.clientID">
      <e-title title="Account Revival" />
      <div class="table">
        <a-row>
          <a-col :span="4" class="cell field">Reason</a-col>
          <a-col :span="20" class="cell value" style="white-space: pre-line">
            {{ props.applyForRevivalData.reason }}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="cell field">Created By</a-col>
          <a-col :span="20" class="cell value">{{ props.applyForRevivalData.displayName }}</a-col>
        </a-row>
      </div>
    </e-container>
    <e-container v-if="briefInfo.status === 1">
      <e-title title="Review Information" />
      <div class="table">
        <a-row>
          <a-col :span="4" class="cell field">Status</a-col>
          <a-col :span="8" class="cell value">
            <a-tag v-if="reviewInfo.status === 10" color="#bae1ff" style="color: #5b7895; font-weight: bold">
              Pending
            </a-tag>
            <a-tag v-if="reviewInfo.status === 30" color="#ffe5d9" style="color: #cb6e46; font-weight: bold">
              Rejected
            </a-tag>
          </a-col>
          <a-col :span="4" class="cell field">Handler</a-col>
          <a-col :span="8" class="cell value">
            {{ reviewInfo.bumName }}
          </a-col>
        </a-row>
        <a-row v-if="reviewInfo.status === 30">
          <a-col :span="4" class="cell field">Reason</a-col>
          <a-col :span="20" class="cell value" style="white-space: pre-line">{{ reviewInfo.reason }}</a-col>
        </a-row>
      </div>
    </e-container>
    <e-container v-permission="'Summary:PhaseProgress:Query'">
      <e-title title="Phase Progress" />
      <div v-if="clientIsNoPhase" class="activate-client">
        <a-tag>Phase 0</a-tag>
      </div>
      <phase-progress-bar v-else :phase-progress-info="phaseProgressInfo" :cancel-info="cancelInfo" />
    </e-container>
    <e-container v-permission="'Summary:BasicInformation:Query'">
      <e-title title="Basic Information" />
      <div class="table">
        <a-row>
          <a-col :span="4" class="cell field">Client Number</a-col>
          <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.clientNum) }}</a-col>
          <a-col :span="4" class="cell field">Country/Region</a-col>
          <a-col :span="8" class="cell value">
            <e-country-or-region :code="basicInfo.raw.value.countryID" />
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="cell field">Organization</a-col>
          <a-col :span="8" class="cell value">{{
            Utils.transformNullValue(basicInfo.transformed.value.parentID)
          }}</a-col>
          <a-col :span="4" class="cell field">Tier Level</a-col>
          <a-col :span="8" class="cell value">{{
            Utils.transformNullValue(basicInfo.transformed.value.clientTier)
          }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="cell field">Client Name</a-col>
          <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.fullName) }}</a-col>
          <a-col :span="4" class="cell field">Status</a-col>
          <a-col :span="8" class="cell value"><e-client-status :status="basicInfo.raw.value.status" /></a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="cell field">Abbreviation</a-col>
          <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.shortName) }}</a-col>
          <a-col :span="4" class="cell field">Owner</a-col>
          <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.owner) }}</a-col>
        </a-row>
        <a-row v-if="!briefInfo.isExisting">
          <a-col :span="4" class="cell field">Client Industry</a-col>
          <a-col :span="8" class="cell value">{{
            Utils.transformNullValue(basicInfo.transformed.value.saleBUID)
          }}</a-col>
          <a-col :span="4" class="cell field">Shared Persons</a-col>
          <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.shareOwner) }}</a-col>
        </a-row>
        <a-row v-else>
          <a-col :span="4" class="cell field">Client Industry</a-col>
          <a-col :span="20" class="cell value">{{
            Utils.transformNullValue(basicInfo.transformed.value.saleBUID)
          }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="cell field">Remark</a-col>
          <a-col :span="20" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.description) }}</a-col>
        </a-row>
      </div>
    </e-container>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { useBasicInfo } from '@/pages/Client/hooks/useBasicInfo.js'
import Utils from '@/utils'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import PhaseProgressBar from '@/pages/Client/components/ProgressBar.vue'
import ECountryOrRegion from '@/components/ECountryOrRegion.vue'
import EClientStatus from '@/components/EClientStatus.vue'
import Summary from '@/api/client/Summary.js'
import Client from '@/api/client'
const route = useRoute()
const store = useStore()
const { basicInfo } = useBasicInfo(route.params.id)
const props = defineProps({
  applyForExtensionData: {
    type: Object,
    default() {
      return {}
    }
  },
  applyForRevivalData: {
    type: Object,
    default() {
      return {}
    }
  }
})
// 客户 id
const id = route.params.id
// 客户简要信息（是否活跃、是否是目标客户，是否可以转正等）
const briefInfo = computed(() => store.state.client.briefInfo)
const phaseProgressInfo = ref([])
const cancelInfo = ref({})
const clientIsNoPhase = computed(() => !briefInfo.value.isExisting && briefInfo.value.phaseID === -1)
const reviewInfo = ref({})
// 获取当前客户的线索
if (!clientIsNoPhase.value) {
  Summary.getCurrentPhaseInfo(id).then(({ data }) => {
    phaseProgressInfo.value = data.leadsPhases
  })
}
// 待审核客户获取审核信息
if (briefInfo.value.status === 1) {
  Client.getPendingClientPreviewInfo(id).then(({ data }) => {
    reviewInfo.value = data
  })
}
</script>
<style scoped lang="less">
.summary {
  .e-container {
    margin-top: 24px;
  }
  .e-container:nth-child(1) {
    margin-top: 0;
  }
}
.table {
  margin-top: 24px;
  border: 1px solid @lighter-gray;
  .cell {
    padding: 10px 14px;
    border-bottom: 1px solid @lighter-gray;
    border-right: 1px solid @lighter-gray;
    &:last-child {
      border-right: none;
    }
    &.field {
      background-color: @milk;
      color: @text-gray;
    }
  }
  .ant-row:last-child {
    .cell {
      border-bottom: none;
    }
  }
}
.activate-client {
  width: 100%;
  height: 93px;
  background-color: @phase-default;
  margin: 24px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .ant-tag {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: bold;
    background-color: #d9cfcf;
    color: #979191;
    border-color: #beb7b7;
  }
  :deep(.ant-space-item) {
    font-weight: bold;
  }
}
</style>
<route lang="yaml">
name: Summary
path: '/client/:id/summary'
meta:
  sort: 0
  icon: Summary
  permission: Summary
</route>
